<template>
  <div>
    <el-card shadow="never" style="min-height:650px;">
      <el-row style="margin-bottom:10px; margin-top:11px;">
        <el-button type="success" size="mini" icon="el-icon-plus" @click="dialog.addDialogStatus = true">新增</el-button>
        <el-button type="primary" size="mini"  icon="el-icon-edit-outline" :disabled="single" @click="editor(ids)">修改</el-button>
        <el-button type="warning" size="mini"  icon="el-icon-delete" :disabled="single" @click="buildApplication(ids)">生成应用</el-button>
        <el-button type="warning" size="mini"  icon="el-icon-edit-outline" :disabled="single" @click="createDocProject(ids)">生成apipos接口文档项目</el-button>
      </el-row>
      
      <el-table highlight-current-row @current-change="selection"  row-key="app_id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"  ref="multipleTable" border class="eltable" :data="list"  style="width: 100%">            
        <el-table-column align="center" property="app_id" label="编号" width="70"></el-table-column>
        <el-table-column align="center" property="application_name" label="应用名"></el-table-column>
        <el-table-column align="center" property="app_dir" label="应用目录"></el-table-column>
        <el-table-column align="center" property="port" label="端口号"></el-table-column>
        <el-table-column align="center" property="limit" label="限流"></el-table-column>
        <el-table-column align="center" property="app_type" label="应用类型">
          <template slot-scope="scope">
            <span v-if="scope.row.app_type == '1'" >后台应用</span>
            <span v-if="scope.row.app_type == '2'" >api应用</span>
            <span v-if="scope.row.app_type == '3'" >rpc应用</span>
            <span v-if="scope.row.app_type == '4'" >消费队列</span>
            <span v-if="scope.row.app_type == '5'" >websocket</span>
            <span v-if="scope.row.app_type == '6'" >定时任务</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit-outline" @click="editor(scope.row)">修改</el-button>
            <el-button size="mini" slot="reference" icon="el-icon-delete" @click="deleteApplication(scope.row)" type="danger">卸载</el-button>
          </template>
        </el-table-column>

      </el-table>
      <p style="line-height:24px; margin-top:10px;">
apipost接口文档生成说明：<br/>
1、下载apipost客户端<br/>
2、进入客户端侧栏，项目设置->openapi 点击右上角点击新建 获取api_token 复制<br/>
3、进入app/admin/sys/apipost.go 替换token<br/>
4、进入应用管理 选中api应用 点击生成apipost接口文档项目 <br/>
5、选中对应的api 菜单栏目即可生成接口文档
</p>
      <!--添加-->
      <Add :show.sync="dialog.addDialogStatus"  @refesh_list="loadlist"></Add>
      <!--修改-->
      <Update :show.sync="dialog.updateDialogStatus" :info="info" @refesh_list="loadlist"></Update>  
    </el-card>
  </div>
  </template>
  <script>
  import Add from './Add.vue'
  import Update from './Update.vue'
  export default {
    components: { Add,Update},
    data() {
      return {
        dialog: {
          addDialogStatus : false,
          updateDialogStatus : false,
        },
        ids: {},
        single:true,
        multiple: true,
        list: [],
        info:{},
        loading: false,
      }
    },
    mounted(){
      this.loadlist()
    },
    methods:{
      loadlist() { 
        this.loading = true
        this.$axios.post('/admin/Sys/Base/application').then(res => {
          if(res.status == 200){
            this.list = res.data.data.data
            this.loading = false
          }
        });
      },
      editor(row){
        if(row.app_id == 1){
          this.$message.error('该应用禁止修改!')
          return false
        }
        this.$axios.post('/admin/Sys/Base/getApplicationInfo',{app_id:row.app_id}).then(res => {
          if(res.data.status == 200){
            this.dialog.updateDialogStatus = true;
            this.info = res.data.data
          }else{
            this.$message.error('获取信息失败!')
          }
        })
      },
      buildApplication(row){
        if(row.app_id == 1){
          this.$message.error('admin应用禁止生成!')
          return false
        }
        this.$confirm('确定生成吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post('/admin/Sys/Base/buildApplication',{app_id:row.app_id}).then(res => {
            if(res.data.status == 200){
              this.$message({message: '生成成功', type: 'success'})
            }else{
              this.$message.error(res.data.msg)
            }
          })
        })
      },
      deleteApplication(row){
        if(row.app_id == 1){
          this.$message.error('该应用禁止卸载!')
          return false
        }
        this.$confirm('确定卸载吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post('/admin/Sys/Base/deleteApplication',{app_id:row.app_id}).then(res => {
            if(res.data.status == 200){
              this.$message({message: '操作成功', type: 'success'})
              this.loadlist()
            }else{
              this.$message.error('操作失败!')
            }
          });
        }).catch(() => {});
      },
      createDocProject(row){
        this.$confirm('确定生成吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let id = row.app_id ? row.app_id : this.ids.join(',')
          this.$axios.post('/admin/Sys/ApiPost/createDocProject',{app_id:row.app_id}).then(res => {
            if(res.data.status == 200){
              this.$message({message: '生成成功', type: 'success'})
            }else{
              this.$message.error(res.data.msg)
            }
          })
        })
      },
      selection(selection) {
        this.ids = {app_id:selection.app_id}
        this.single = false
      },
    },
  };
  </script>
  <style  lang="scss">
  @import '@/assets/scss/common.scss'
  </style>